<template>
	<div class="activityRank">
		<div class="Btit">
			<img src="http://m.tepin.hk/shop/resources/index/images/hot_goods_rank_titimg.jpg" alt="">
		</div>
		<ul class="rankList">
			<li v-for="(item,index) of ActRankData.data" :key="index" @click="jumpUrl(item.h5_url)">
				<h1>
					<span>{{item.typeString}}</span>
				</h1>
				<div class="hot_goods_rank_list_con">
					<div class="hot_goods_rank_list_con_l">
						<h2>{{item.brand_name}}</h2>
						<h3>{{item.product_name}}</h3>
						<h4>￥{{item.salePrice}}</h4>
					</div>
					<img v-lazy="item.img_url" alt="">
				</div>
			</li>
		</ul>
	</div>
</template>
<script>

export default{
	name:'activityRank',
	data(){
		return{
			
		}
	},
	props:{
		ActRankData:Object
	},
	components:{
		
	},
	created(){
		
	},
	mounted(){
		
	},
	methods:{
		jumpUrl(e){
			window.location.href = e
		}
	}
}
</script>
<style scoped>
.activityRank{width:100%;overflow: hidden;}
.Btit{width:100%;overflow: hidden;margin-top:10px;}
.Btit img{width:100%;}
.rankList{width:100%;overflow: hidden;background:#fff url('http://a.tepin.hk/o/2018hwg/images/hot_goods_rank_list_con_l-bg.png') no-repeat center center;background-size:10.0rem 5.653333rem;}
.rankList li{width:50%;float: left;height:2.5rem;}
.rankList li h1{/*width:50%;*/float: left;height:2.5rem;background: url('http://a.tepin.hk/o/2018hwg/images/top1.png') no-repeat 10px center;background-size:0.7rem 0.3rem;height:0.5rem;margin-top:0.3rem;}
.rankList li h1 span{font-size: 0.33rem;color:#d4464d;text-indent:55px;display: inline-block;line-height: 0.5rem;}
.rankList li .hot_goods_rank_list_con{width:100%;display: -webkit-box;display: -webkit-flex;display: flex;}
.rankList li .hot_goods_rank_list_con img{width:1.6rem;height:1.6rem;margin-right:2px;}
.rankList li .hot_goods_rank_list_con_l{-webkit-box-flex: 1;-webkit-flex: 1;flex: 1;overflow: hidden;}
.rankList li .hot_goods_rank_list_con_l h2{width:100%;font-size:14px;color:#363636;padding-left:10px;margin-top:15px;overflow: hidden;white-space: nowrap;text-overflow:ellipsis;font-weight: bold;}
.rankList li .hot_goods_rank_list_con_l h3{width:100%;padding-left:10px;font-size:12px;color:#898989;overflow: hidden;white-space: nowrap;text-overflow:ellipsis;margin-top:5px;}
.rankList li .hot_goods_rank_list_con_l h4{width:100%;padding-left:10px;font-size:14px;color:#363636;overflow: hidden;white-space: nowrap;text-overflow:ellipsis;margin-top:5px;}
.rankList li .hot_goods_rank_list_con_l h4:first-letter{/*margin-right:2px;*/}


</style>